<template>
  <scroll-view class="scroll-view" enable-back-to-top scroll-y>
    <view class="laws">
      <view class="law-item" v-for="(lawItem, lawIndex) in lawList" :key="lawIndex" @tap="toLawPage(lawItem.url)">
        <image class="law-img" :src="lawItem.imgUrl" mode="scaleToFill" />
        <view class="law-title">
          <view class="law-name">{{ lawItem.name }}</view>
          <view class="law-desc">{{ lawItem.describe }}</view>
        </view>
      </view>
    </view>
  </scroll-view>

</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, nextTick } from 'vue'
  import type { LawVo } from '@/api/base/types'
  import { getLawsApi } from '@/api/base'

  const props = defineProps<{
    baseType: string
  }>()

  // 题库类型
  const baseType = computed(() => props.baseType)
  // 法律法规列表
  const lawList = ref<LawVo[]>([])

  // 获取法规列表数据
  const getLaws = async () => {
    let res = await getLawsApi()
    lawList.value = res.data
  }

  onMounted(async () => {
    nextTick(() => {
      getLaws()
    })
  })
  // 去法律法规详情页面
  const toLawPage = (htmPageUrl: string | undefined) => {
    htmPageUrl = encodeURIComponent(htmPageUrl!)
    uni.navigateTo({
      url: `/pages/webView/webView?htmPageUrl=${htmPageUrl}`
    })
  }
</script>

<style lang="scss" scoped>
  .scroll-view {
    height: 100%;
  }

  .laws {
    margin-top: 30rpx;
    height: 100%;

    .law-item {
      display: flex;
      align-items: center;
      padding: 34rpx;
      border-bottom: 2rpx solid #f5f5f5;

      .law-img {
        width: 135rpx;
        height: 91rpx;
      }

      .law-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 40rpx;

        .law-name {
          font-size: 30rpx;
          color: #313131;
        }

        .law-desc {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #a0a0a0;
        }
      }
    }
  }

</style>
